<template>
<div>

<el-row>
    <div align="center"><h1>k8s端口占用检测页面</h1></div>
</el-row>


<el-row>
  <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content">
  
    <h2>1.请输入需查询的端口</h2>
    <br><br>
    <el-input v-model="input"  placeholder="请输入内容" style="width: 100%"></el-input>
    <br><br><br><br>
    <el-button type="primary" style="width: 40%" @click="open">查询该端口</el-button>
  </div></el-col>

</el-row>
<br><br>
<el-row>
  <el-col :span="2"><div class="grid-content"></div></el-col>
  <el-col :span="20"><div class="grid-content" v-html="message2">

    </div></el-col>
</el-row>



</div>
</template>

<script>
import { K8sPodQuery } from '@/api/query'

export default {
  data() {
    return {
      message2:'',
      input: '',
      val :'',
    };
  },
  methods: {
    open() {
      if (this.input.length== 0 ) {
        console.log('1111')
        this.$alert('内容不可为空', '注意', {
          confirmButtonText: '确定',
        });
      } else{
        K8sPodQuery({ "ports": this.input}).then(response => {
          this.message2 = response.data
        })
      }
    },
  },
};
</script>

<style>
.el-col {
  min-height: 1px
}
</style>